<template>
    <div class="shoe-store">
      <!-- 导航栏：复用主页面样式，默认激活“鞋类大全” -->
      <el-menu
        default-active="2"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#1a1a1a"
        text-color="#fff"
        active-text-color="#ff4d4f"
        @select="handleSelect"
        border-bottom="false"
      >
        <div class="logo">
          <span class="brand">鞋城履行</span>
        </div>
        <el-menu-item index="1" @click="$router.push('/main')">首页</el-menu-item>
        <el-menu-item index="2" @click="$router.push('/page/shoe')">鞋类大全</el-menu-item>
        <el-menu-item index="3" @click="$router.push('/page/shoppingcart')">购物车</el-menu-item>
        <el-menu-item index="4" @click="$router.push('/page/orders')">订单</el-menu-item>
        <div class="user-actions">
          <el-icon class="icon" @click="showSearch = !showSearch"><Search /></el-icon>
          <el-icon class="icon"><User/></el-icon>
          <el-icon class="icon"><ShoppingCart /></el-icon>
        </div>
      </el-menu>
  
      <!-- 搜索框：与主页面逻辑一致，支持关键词搜索鞋款 -->
      <div v-if="showSearch" class="search-container">
        <el-input 
          placeholder="搜索鞋款、品牌或系列..." 
          v-model="searchQuery"
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button icon="Search" @click="handleSearch"></el-button>
          </template>
        </el-input>
      </div>
  
      <!-- 页面标题区：延续主页面标题样式，明确页面功能 -->
      <div class="shoe-list-header">
        <div class="container">
          <h1 class="page-title">鞋类大全</h1>
          <p class="page-desc">展示全品类鞋款完整信息，包含规格、材质、功能等细节</p>
        </div>
      </div>
  
      <!-- 筛选区：多维度筛选，快速定位目标鞋款 -->
      <div class="filter-section">
        <div class="container">
          <div class="filter-bar">
            <!-- 分类筛选（关联主页面分类数据） -->
            <div class="filter-item">
              <span class="filter-label">鞋类分类：</span>
              <el-select 
                v-model="selectedCategory" 
                placeholder="全部分类" 
                class="filter-select"
                @change="filterShoes"
              >
                <el-option label="全部分类" value="all"></el-option>
                <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id"></el-option>
              </el-select>
            </div>
  
            <!-- 品牌筛选（关联主页面品牌数据） -->
            <div class="filter-item">
              <span class="filter-label">品牌：</span>
              <el-select 
                v-model="selectedBrand" 
                placeholder="全部品牌" 
                class="filter-select"
                @change="filterShoes"
              >
                <el-option label="全品牌" value="all"></el-option>
                <el-option label="耐克" value="1"></el-option>
                <el-option label="匡威" value="2"></el-option>
                <el-option label="李宁" value="3"></el-option>
                <el-option label="鸿星尔克" value="4"></el-option>
                <el-option label="阿迪达斯" value="5"></el-option>
              </el-select>
            </div>
  
            <!-- 价格区间筛选 -->
            <div class="filter-item">
              <span class="filter-label">价格：</span>
              <el-select 
                v-model="selectedPrice" 
                placeholder="全部价格" 
                class="filter-select"
                @change="filterShoes"
              >
                <el-option label="0-500元" value="0-500"></el-option>
                <el-option label="500-1000元" value="500-1000"></el-option>
                <el-option label="1000-1500元" value="1000-1500"></el-option>
                <el-option label="1500元以上" value="1500+"></el-option>
              </el-select>
            </div>
  
            <!-- 排序功能 -->
            <div class="filter-item ml-auto">
              <span class="filter-label">排序：</span>
              <el-select 
                v-model="sortType" 
                placeholder="默认排序" 
                class="filter-select"
                @change="sortShoes"
              >
                <el-option label="默认排序" value="default"></el-option>
                <el-option label="价格从低到高" value="price-asc"></el-option>
                <el-option label="价格从高到低" value="price-desc"></el-option>
                <el-option label="新品优先" value="newest"></el-option>
              </el-select>
            </div>
  
            <!-- 重置筛选 -->
            <el-button type="text" class="reset-filter" @click="resetFilter">重置筛选</el-button>
          </div>
  
          <!-- 筛选结果统计 -->
          <div class="filter-result">
            <span>共找到 {{ allShoes.length }} 款鞋，当前展示 {{ filteredShoes.length }} 款</span>
          </div>
        </div>
      </div>
  
      <!-- 鞋类大全列表：核心区域，展示每款鞋的完整信息 -->
      <section class="shoe-list-section">
        <div class="container">
          <div class="shoe-grid">
            <!-- 鞋款卡片：每个卡片包含完整信息 -->
            <div v-for="shoe in paginatedShoes" :key="shoe.id" class="shoe-card">
              <!-- 1. 鞋款图片区 -->
              <div class="shoe-img-wrapper">
                <img :src="shoe.imgUrl" alt="鞋款图片" class="shoe-img">
                <!-- 标签：新品/折扣 -->
                <div class="shoe-tags">
                  <span v-if="shoe.isNew" class="tag new-tag">新品</span>
                  <span v-if="shoe.discount > 0" class="tag discount-tag">-{{ shoe.discount }}%</span>
                </div>
                <!-- 快速加购 -->
                <button class="add-cart-btn" @click="addToCart(shoe)">
                  <el-icon><ShoppingCart /></el-icon> 加入购物车
                </button>
              </div>
  
              <!-- 2. 鞋款基础信息区 -->
              <div class="shoe-basic-info">
                <h3 class="shoe-name">{{ shoe.name }}</h3>
                <div class="shoe-brand">
                  <span class="brand-label">品牌：</span>
                  <span class="brand-value">{{ getBrandName(shoe.brandId) }}</span>
                </div>
                <div class="shoe-category">
                  <span class="category-label">分类：</span>
                  <span class="category-value">{{ getCategoryName(shoe.categoryId) }}</span>
                </div>
              </div>
  
              <!-- 3. 鞋款价格区 -->
              <div class="shoe-price">
                <span v-if="shoe.originalPrice" class="original-price">¥{{ shoe.originalPrice }}</span>
                <span class="current-price">¥{{ shoe.price }}</span>
                <span v-if="shoe.discount > 0" class="save-tip">立省 ¥{{ shoe.originalPrice - shoe.price }}</span>
              </div>
  
              <!-- 4. 鞋款详细参数区（展开/收起） -->
              <div class="shoe-detail">
                <el-collapse v-model="activeDetail[shoe.id]">
                  <el-collapse-item title="查看完整参数" name="detail">
                    <div class="detail-table">
                      <table>
                        <tbody>
                          <tr>
                            <td class="param-name">适用场景</td>
                            <td class="param-value">{{ shoe.scene }}</td>
                          </tr>
                          <tr>
                            <td class="param-name">鞋面材质</td>
                            <td class="param-value">{{ shoe.upperMaterial }}</td>
                          </tr>
                          <tr>
                            <td class="param-name">鞋底材质</td>
                            <td class="param-value">{{ shoe.soleMaterial }}</td>
                          </tr>
                          <tr>
                            <td class="param-name">鞋码范围</td>
                            <td class="param-value">{{ shoe.sizeRange }}</td>
                          </tr>
                          <tr>
                            <td class="param-name">功能特点</td>
                            <td class="param-value">{{ shoe.features.join('、') }}</td>
                          </tr>
                          <tr>
                            <td class="param-name">上市时间</td>
                            <td class="param-value">{{ shoe.launchDate }}</td>
                          </tr>
                          <tr>
                            <td class="param-name">库存状态</td>
                            <td class="param-value">
                              <span :class="shoe.stock > 0 ? 'in-stock' : 'out-stock'">
                                {{ shoe.stock > 0 ? `有货（${shoe.stock}件）` : '缺货' }}
                              </span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- 详细描述 -->
                    <div class="detail-desc">
                      <h4>产品描述：</h4>
                      <p>{{ shoe.description }}</p>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
  
              <!-- 5. 操作区 -->
              <div class="shoe-actions">
                <el-button type="primary" @click="viewShoeDetail(shoe.id)">查看详情页</el-button>
                <el-button type="default" @click="addToCart(shoe)" :disabled="shoe.stock === 0">
                  {{ shoe.stock > 0 ? '加入购物车' : '已缺货' }}
                </el-button>
              </div>
            </div>
          </div>
  
          <!-- 无结果提示 -->
          <div v-if="filteredShoes.length === 0" class="no-result">
            <el-empty description="暂无符合条件的鞋款，请调整筛选条件"></el-empty>
          </div>
  
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[9, 18, 27]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="filteredShoes.length"
            ></el-pagination>
          </div>
        </div>
      </section>
  
      <!-- 页脚：完全复用主页面样式 -->
      <footer class="footer">
        <div class="footer-content">
          <div class="footer-column">
            <h3>关于我们</h3>
            <ul>
              <li><a href="#">品牌故事</a></li>
              <li><a href="#">招贤纳士</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>客户服务</h3>
            <ul>
              <li><a href="#">帮助中心</a></li>
              <li><a href="#">售后服务</a></li>
              <li><a href="#">配送信息</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>支付方式</h3>
            <ul>
              <li><a href="#">在线支付</a></li>
              <li><a href="#">货到付款</a></li>
              <li><a href="#">优惠券使用</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>关注我们</h3>
            <div class="social-icons">
              <el-icon class="social-icon"><Weibo /></el-icon>
              <el-icon class="social-icon"><Wechat /></el-icon>
              <el-icon class="social-icon"><Instagram /></el-icon>
            </div>
            <p class="app-download">下载我们的APP</p>
          </div>
        </div>
        <div class="copyright">
          <p>© 2023 KickShop. 保留所有权利</p>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { Search, User, ShoppingCart } from '@element-plus/icons-vue';
  // 导入主页面图片资源
  import basketball from '../../photos/篮球鞋.jpg'
  import running from '../../photos/跑步鞋.jpg'
  import flatshoes from '../../photos/板鞋.jpg'
  import footballshoes from '../../photos/足球鞋.jpg'
  import xlshoes from '../../photos/训练鞋.jpg'
  import xxshoes from '../../photos/休闲鞋.jpg'
  import nike from '../../photos/耐克.jpg'
  import kw from '../../photos/匡威.jpg'
  import ad from '../../photos/阿迪达斯.jpg'
  import ln from '../../photos/李宁.jpg'
  import hx from '../../photos/鸿星尔克.jpg'
  
  // 1. 状态管理
  const showSearch = ref(false);
  const searchQuery = ref('');
  // 筛选状态
  const selectedCategory = ref('all'); // 分类筛选（all=全部）
  const selectedBrand = ref('all'); // 品牌筛选（all=全部）
  const selectedPrice = ref(''); // 价格筛选
  const sortType = ref('default'); // 排序类型
  // 分页状态
  const currentPage = ref(1);
  const pageSize = ref(9);
  // 详情展开状态（按鞋款ID存储）
  const activeDetail = ref({});
  
  // 2. 基础数据（复用主页面分类、品牌，补充全量鞋款数据）
  // 分类数据（与主页面一致）
  const categories = ref([
    { id: 1, name: '篮球鞋', imgUrl: basketball },
    { id: 2, name: '跑步鞋', imgUrl: running },
    { id: 3, name: '板鞋', imgUrl: flatshoes },
    { id: 4, name: '足球鞋', imgUrl: footballshoes },
    { id: 5, name: '训练鞋', imgUrl: xlshoes },
    { id: 6, name: '休闲鞋', imgUrl: xxshoes }
  ]);
  
  // 品牌数据（与主页面一致，补充名称映射）
  const brands = ref([
    { id: 1, name: '耐克', imgUrl: nike },
    { id: 2, name: '匡威', imgUrl: kw },
    { id: 3, name: '李宁', imgUrl: ln },
    { id: 4, name: '鸿星尔克', imgUrl: hx },
    { id: 5, name: '阿迪达斯', imgUrl: ad }
  ]);
  
  // 全量鞋款数据（包含完整信息：基础信息+参数+描述）
  const allShoes = ref([
    // 篮球鞋系列
    {
      id: 1,
      name: 'LeBron 19 篮球鞋',
      brandId: 1, // 耐克
      categoryId: 1, // 篮球鞋
      price: 1599,
      originalPrice: 1799,
      discount: 11,
      isNew: false,
      imgUrl: 'https://picsum.photos/id/1002/400/400',
      scene: '专业篮球比赛、高强度训练',
      upperMaterial: '编织网布+合成皮革',
      soleMaterial: 'Zoom Air 气垫+橡胶外底',
      sizeRange: '39-46码',
      features: ['抗扭转支撑', '缓震回弹', '透气排汗', '耐磨防滑'],
      launchDate: '2022-09-15',
      stock: 28,
      description: '专为大体重球员设计，前掌Zoom Air气垫提供强劲回弹，后掌Max Air气垫增强缓震效果，编织鞋面兼顾透气与支撑，适合内线对抗与外线突破场景。'
    },
    {
      id: 2,
      name: 'Kyrie 8 篮球鞋',
      brandId: 1, // 耐克
      categoryId: 1, // 篮球鞋
      price: 1299,
      originalPrice: 1299,
      discount: 0,
      isNew: true,
      imgUrl: 'https://picsum.photos/id/1012/400/400',
      scene: '后卫突破、变向运球',
      upperMaterial: '工程网眼布',
      soleMaterial: '橡胶外底+Zoom Air气垫',
      sizeRange: '38-45码',
      features: ['灵活响应', '抓地出色', '低帮设计', '轻量化'],
      launchDate: '2023-03-10',
      stock: 45,
      description: '为追求灵活变向的后卫打造，采用曲线鞋底设计增强变向能力，前掌Zoom Air气垫提供快速响应，低帮剪裁提升脚踝灵活性，适合需要频繁变向的球员。'
    },
    {
      id: 3,
      name: '韦德之道 10 篮球鞋',
      brandId: 3, // 李宁
      categoryId: 1, // 篮球鞋
      price: 1099,
      originalPrice: 1299,
      discount: 15,
      isNew: false,
      imgUrl: 'https://picsum.photos/id/1025/400/400',
      scene: '全能位置、实战比赛',
      upperMaterial: 'MONO纱+TPU',
      soleMaterial: '䨻科技中底+橡胶外底',
      sizeRange: '39-46码',
      features: ['极致轻量化', '高回弹', '稳定支撑', '透气性能佳'],
      launchDate: '2022-08-20',
      stock: 15,
      description: '搭载李宁䨻科技中底，重量轻且回弹出色，全掌碳纤维抗扭片提升稳定性，适合各种位置球员，尤其适合追求速度与力量平衡的篮球爱好者。'
    },
  
    // 跑步鞋系列
    {
      id: 4,
      name: 'Air Zoom 跑步鞋',
      brandId: 1, // 耐克
      categoryId: 2, // 跑步鞋
      price: 899,
      originalPrice: 1099,
      discount: 18,
      isNew: false,
      imgUrl: 'https://picsum.photos/id/1000/400/400',
      scene: '长距离慢跑、日常训练',
      upperMaterial: '透气网眼布',
      soleMaterial: 'Zoom Air气垫+橡胶外底',
      sizeRange: '37-47码',
      features: ['轻盈缓震', '透气舒适', '耐磨耐用', '支撑稳定'],
      launchDate: '2022-06-05',
      stock: 63,
      description: '专为长距离跑步设计，前掌Zoom Air气垫提供出色缓震，后跟稳定片增强支撑性，透气网布鞋面保持脚部干爽，适合每周跑量20公里以上的跑者。'
    },
    {
      id: 5,
      name: 'Ultraboost 22 跑步鞋',
      brandId: 5, // 阿迪达斯
      categoryId: 2, // 跑步鞋
      price: 1299,
      originalPrice: 1499,
      discount: 13,
      isNew: false,
      imgUrl: 'https://picsum.photos/id/1003/400/400',
      scene: '慢跑、马拉松',
      upperMaterial: 'Primeknit针织鞋面',
      soleMaterial: 'Boost中底+Continental橡胶外底',
      sizeRange: '36-48码',
      features: ['高回弹', '自适应包裹', '湿地抓地', '支撑性强'],
      launchDate: '2022-01-15',
      stock: 32,
      description: '搭载全掌Boost中底，提供卓越能量回馈，Primeknit鞋面随脚型自适应包裹，Continental橡胶外底在湿滑路面也能保持出色抓地力，是马拉松爱好者的理想选择。'
    },
    {
      id: 6,
      name: '赤兔6 Pro 跑步鞋',
      brandId: 3, // 李宁
      categoryId: 2, // 跑步鞋
      price: 499,
      originalPrice: 599,
      discount: 17,
      isNew: true,
      imgUrl: 'https://picsum.photos/id/1035/400/400',
      scene: '竞速训练、半马/全马',
      upperMaterial: '贾卡网布',
      soleMaterial: '䨻科技中底+TUFF RB橡胶',
      sizeRange: '37-46码',
      features: ['轻量竞速', '高回弹', '透气排汗', '抗撕裂'],
      launchDate: '2023-01-20',
      stock: 58,
      description: '专为竞速打造的训练鞋，䨻科技中底重量轻、回弹高，前掌加宽设计提升落地稳定性，适合有一定基础的跑者进行速度训练和马拉松比赛。'
    },
  
    // 板鞋系列
    {
      id: 7,
      name: 'Dunk Low 板鞋',
      brandId: 1, // 耐克
      categoryId: 3, // 板鞋
      price: 799,
      originalPrice: 799,
      discount: 0,
      isNew: true,
      imgUrl: 'https://picsum.photos/id/1001/400/400',
      scene: '街头潮流、日常穿搭',
      upperMaterial: '全粒面皮革',
      soleMaterial: '橡胶外底',
      sizeRange: '36-47码',
      features: ['经典款式', '百搭时尚', '耐磨耐穿', '舒适脚感'],
      launchDate: '2023-02-10',
      stock: 76,
      description: '经典板鞋款式，采用优质皮革打造鞋面，简约设计适合各种穿搭风格，加厚中底提供舒适脚感，无论是街头滑板还是日常出行都能轻松驾驭。'
    },
    {
      id: 8,
      name: 'Chuck 70 经典板鞋',
      brandId: 2, // 匡威
      categoryId: 3, // 板鞋
      price: 599,
      originalPrice: 599,
      discount: 0,
      isNew: false,
      imgUrl: 'https://picsum.photos/id/1040/400/400',
      scene: '休闲穿搭、街头文化',
      upperMaterial: '帆布',
      soleMaterial: '橡胶外底',
      sizeRange: '35-46码',
      features: ['复古风格', '百搭易穿', '坚固耐用', '可水洗'],
      launchDate: '2021-11-05',
      stock: 92,
      description: '百年经典款式，1970年代复刻版，加厚中底提升舒适度，加固缝线增强耐用性，帆布材质可水洗，是街头文化和复古风格爱好者的必备单品。'
    },
  
    // 足球鞋系列
    {
      id: 9,
      name: 'Mercurial Superfly 8 足球鞋',
      brandId: 1, // 耐克
      categoryId: 4, // 足球鞋
      price: 1899,
      originalPrice: 1899,
      discount: 0,
      isNew: true,
      imgUrl: 'https://picsum.photos/id/1050/400/400',
      scene: '专业足球比赛、高强度训练',
      upperMaterial: 'Flyknit编织鞋面',
      soleMaterial: '玻璃纤维底盘+橡胶鞋钉',
      sizeRange: '38-46码',
      features: ['极速响应', '精准控球', '轻量化', '贴合脚型'],
      launchDate: '2023-01-15',
      stock: 18,
      description: '为速度型球员设计，Flyknit鞋面提供袜子般的贴合感，Vaporposite+涂层增强控球能力，玻璃纤维底盘减轻重量同时保持支撑，适合边锋和前锋位置。'
    },
  
    // 训练鞋系列
    {
      id: 10,
      name: 'Metcon 7 训练鞋',
      brandId: 1, // 耐克
      categoryId: 5, // 训练鞋
      price: 899,
      originalPrice: 999,
      discount: 10,
      isNew: false,
      imgUrl: 'https://picsum.photos/id/1060/400/400',
      scene: '力量训练、HIIT、功能性训练',
      upperMaterial: '网眼布+合成材料',
      soleMaterial: '橡胶外底+TPU稳定片',
      sizeRange: '37-47码',
      features: ['稳定支撑', '耐磨抗造', '多向抓地', '灵活响应'],
      launchDate: '2022-05-20',
      stock: 24,
      description: '专为综合训练设计，宽大稳定的后跟适合重量训练，前掌灵活设计便于敏捷训练，橡胶外底采用特殊纹路增强多向抓地力，满足各种功能性训练需求。'
    },
  
    // 休闲鞋系列
    {
      id: 11,
      name: 'Blazer 休闲鞋',
      brandId: 1, // 耐克
      categoryId: 6, // 休闲鞋
      price: 699,
      originalPrice: 699,
      discount: 0,
      isNew: true,
      imgUrl: 'https://picsum.photos/id/1006/400/400',
      scene: '日常休闲、街头潮流',
      upperMaterial: '皮革+帆布拼接',
      soleMaterial: '橡胶外底',
      sizeRange: '36-47码',
      features: ['复古风格', '潮流设计', '舒适脚感', '百搭款式'],
      launchDate: '2023-01-05',
      stock: 53,
      description: '源于篮球鞋的复古休闲款式，采用皮革与帆布拼接设计，融合复古与现代潮流元素，舒适中底适合日常长时间穿着，是街头穿搭的理想选择。'
    },
    {
      id: 12,
      name: 'NMD_R1 休闲鞋',
      brandId: 5, // 阿迪达斯
      categoryId: 6, // 休闲鞋
      price: 999,
      originalPrice: 1199,
      discount: 17,
      isNew: false,
      imgUrl: 'https://picsum.photos/id/1070/400/400',
      scene: '日常通勤、休闲活动',
      upperMaterial: 'Primeknit针织鞋面',
      soleMaterial: 'Boost中底+橡胶外底',
      sizeRange: '36-48码',
      features: ['舒适缓震', '时尚简约', '透气包裹', '轻便易穿'],
      launchDate: '2022-03-10',
      stock: 37,
      description: '融合街头风格与科技感的休闲鞋，Primeknit鞋面提供舒适包裹，Boost中底带来出色脚感，简约设计适合各种日常穿搭，无论是通勤还是休闲活动都能胜任。'
    }
  ]);
  
  // 3. 计算属性：筛选后的鞋款列表
  const filteredShoes = computed(() => {
    return allShoes.value.filter(shoe => {
      // 分类筛选
      if (selectedCategory.value !== 'all' && shoe.categoryId !== parseInt(selectedCategory.value)) {
        return false;
      }
      // 品牌筛选
      if (selectedBrand.value !== 'all' && shoe.brandId !== parseInt(selectedBrand.value)) {
        return false;
      }
      // 价格筛选
      if (selectedPrice.value) {
        const [min, max] = selectedPrice.value.split('-');
        if (max) {
          if (shoe.price < parseInt(min) || shoe.price > parseInt(max)) {
            return false;
          }
        } else if (selectedPrice.value === '1500+') {
          if (shoe.price < 1500) {
            return false;
          }
        }
      }
      // 搜索筛选
      if (searchQuery.value && !shoe.name.toLowerCase().includes(searchQuery.value.toLowerCase()) && 
          !getBrandName(shoe.brandId).toLowerCase().includes(searchQuery.value.toLowerCase())) {
        return false;
      }
      return true;
    });
  });
  
  // 4. 计算属性：排序后的鞋款列表
  const sortedShoes = computed(() => {
    const sorted = [...filteredShoes.value];
    
    switch (sortType.value) {
      case 'price-asc':
        return sorted.sort((a, b) => a.price - b.price);
      case 'price-desc':
        return sorted.sort((a, b) => b.price - a.price);
      case 'newest':
        return sorted.sort((a, b) => new Date(b.launchDate) - new Date(a.launchDate));
      default:
        return sorted;
    }
  });
  
  // 5. 计算属性：分页后的鞋款列表
  const paginatedShoes = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    return sortedShoes.value.slice(startIndex, startIndex + pageSize.value);
  });
  
  // 6. 方法
  // 获取品牌名称
  const getBrandName = (brandId) => {
    const brand = brands.value.find(b => b.id === brandId);
    return brand ? brand.name : '';
  };
  
  // 获取分类名称
  const getCategoryName = (categoryId) => {
    const category = categories.value.find(c => c.id === categoryId);
    return category ? category.name : '';
  };
  
  // 筛选鞋款
  const filterShoes = () => {
    currentPage.value = 1; // 筛选条件改变时重置到第一页
  };
  
  // 排序鞋款
  const sortShoes = () => {
    currentPage.value = 1; // 排序方式改变时重置到第一页
  };
  
  // 重置筛选条件
  const resetFilter = () => {
    selectedCategory.value = 'all';
    selectedBrand.value = 'all';
    selectedPrice.value = '';
    sortType.value = 'default';
    searchQuery.value = '';
    currentPage.value = 1;
  };
  
  // 搜索功能
  const handleSearch = () => {
    currentPage.value = 1;
  };
  
  // 分页相关方法
  const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1;
  };
  
  const handleCurrentChange = (val) => {
    currentPage.value = val;
  };
  
  // 添加到购物车
  const addToCart = (shoe) => {
    if (shoe.stock === 0) return;
    console.log('添加到购物车:', shoe);
    // 实际项目中这里会调用购物车API
    // 显示添加成功提示
    ElMessage.success(`${shoe.name} 已添加到购物车`);
  };
  
  // 查看详情页
  const viewShoeDetail = (id) => {
    console.log('查看详情页:', id);
    // 实际项目中这里会跳转到详情页路由
    // $router.push(`/shoe-detail/${id}`);
  };
  
  // 菜单选择事件
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);
  };
  </script>
  
  <style scoped>
  /* 基础样式复用主页面 */
  .shoe-store {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
  }
  
  /* 导航栏样式完全复用主页面 */
  .el-menu-demo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .logo {
    font-size: 26px;
    font-weight: 700;
    margin-right: 40px;
    background: linear-gradient(45deg, #ff4d4f, #ff7875);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .el-menu-item {
    position: relative;
    transition: color 0.3s;
  }
  .el-menu-item:hover {
    color: #ff4d4f !important;
  }
  .el-menu-item::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: #ff4d4f;
    transition: transform 0.3s ease;
  }
  .el-menu-item:hover::after {
    transform: translateX(-50%) scaleX(1);
  }
  
  .user-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .icon {
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    transition: transform 0.3s, color 0.3s;
  }
  .icon:hover {
    color: #ff4d4f;
    transform: scale(1.2);
  }
  
  /* 搜索框样式复用主页面 */
  .search-container {
    padding: 15px 50px;
    background-color: #1a1a1a;
  }
  .search-input {
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* 页面标题区样式 */
  .shoe-list-header {
    background-color: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
  }
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .page-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
  }
  .page-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #ff4d4f;
    margin: 15px auto 0;
  }
  .page-desc {
    font-size: 16px;
    color: #666;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* 筛选区样式 */
  .filter-section {
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }
  .filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
  }
  .filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .filter-label {
    color: #666;
    font-size: 14px;
    white-space: nowrap;
  }
  .filter-select {
    width: 160px;
  }
  .ml-auto {
    margin-left: auto;
  }
  .reset-filter {
    color: #666;
    margin-left: 10px;
  }
  .reset-filter:hover {
    color: #ff4d4f;
  }
  .filter-result {
    margin-top: 15px;
    font-size: 14px;
    color: #666;
  }
  
  /* 鞋款列表区样式 */
  .shoe-list-section {
    padding: 40px 0;
  }
  .shoe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
  }
  .shoe-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
  }
  .shoe-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  }
  
  /* 鞋款图片区 */
  .shoe-img-wrapper {
    position: relative;
    height: 300px;
    overflow: hidden;
  }
  .shoe-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .shoe-card:hover .shoe-img {
    transform: scale(1.05);
  }
  .shoe-tags {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
  }
  .tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
  }
  .new-tag {
    background-color: #1890ff;
  }
  .discount-tag {
    background-color: #ff4d4f;
  }
  .add-cart-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0;
    transform: translateY(10px);
  }
  .shoe-card:hover .add-cart-btn {
    opacity: 1;
    transform: translateY(0);
  }
  .add-cart-btn:hover {
    background-color: #d9363e;
    transform: scale(1.05);
  }
  
  /* 鞋款基础信息区 */
  .shoe-basic-info {
    padding: 20px;
    border-bottom: 1px solid #f5f5f5;
  }
  .shoe-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.4;
  }
  .shoe-brand, .shoe-category {
    display: flex;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .brand-label, .category-label {
    color: #999;
    width: 60px;
  }
  .brand-value, .category-value {
    color: #666;
    flex: 1;
  }
  
  /* 鞋款价格区 */
  .shoe-price {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f5f5f5;
  }
  .original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
  }
  .current-price {
    font-size: 20px;
    color: #ff4d4f;
    font-weight: 700;
  }
  .save-tip {
    font-size: 13px;
    color: #67c23a;
    margin-left: auto;
  }
  
  /* 鞋款详细参数区 */
  .shoe-detail {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .detail-table {
    margin-bottom: 20px;
  }
  .detail-table table {
    width: 100%;
    border-collapse: collapse;
  }
  .detail-table tr {
    border-bottom: 1px dashed #f0f0f0;
  }
  .detail-table td {
    padding: 8px 0;
    font-size: 14px;
  }
  .param-name {
    width: 30%;
    color: #999;
  }
  .param-value {
    width: 70%;
    color: #666;
  }
  .detail-desc {
    margin-top: 15px;
  }
  .detail-desc h4 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
  }
  .detail-desc p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
  }
  .in-stock {
    color: #67c23a;
  }
  .out-stock {
    color: #f56c6c;
  }
  
  /* 操作区 */
  .shoe-actions {
    padding: 15px 20px;
    display: flex;
    gap: 10px;
  }
  .shoe-actions el-button {
    flex: 1;
  }
  
  /* 无结果提示 */
  .no-result {
    text-align: center;
    padding: 60px 0;
  }
  
  /* 分页样式 */
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  
  /* 页脚样式完全复用主页面 */
  .footer {
    background: linear-gradient(to right, #1a1a1a, #141414);
    color: white;
    padding: 50px;
  }
  .footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
  }
  .footer-column h3 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
  }
  .footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #ff4d4f;
  }
  .footer-column ul {
    list-style: none;
    padding: 0;
  }
  .footer-column ul li {
    margin-bottom: 10px;
  }
  .footer-column a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s, text-decoration 0.3s;
  }
  .footer-column a:hover {
    color: #ff4d4f;
    text-decoration: underline;
  }
  .social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }
  .social-icon {
    font-size: 24px;
    color: #999;
    transition: color 0.3s, transform 0.3s;
    cursor: pointer;
  }
  .social-icon:hover {
    color: #ff4d4f;
    transform: scale(1.2);
  }
  .app-download {
    color: #999;
    font-size: 14px;
  }
  .copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
    color: #999;
    font-size: 14px;
  }
  
  /* 响应式调整 */
  @media (max-width: 1200px) {
    .shoe-grid {
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
  }
  @media (max-width: 992px) {
    .footer-content {
      grid-template-columns: repeat(2, 1fr);
    }
    .filter-item {
      margin-bottom: 10px;
    }
    .ml-auto {
      margin-left: 0;
      width: 100%;
    }
  }
  @media (max-width: 768px) {
    .el-menu-demo {
      padding: 0 20px;
    }
    .shoe-grid {
      grid-template-columns: 1fr;
    }
    .filter-select {
      width: 130px;
    }
  }
  @media (max-width: 576px) {
    .footer-content {
      grid-template-columns: 1fr;
    }
    .page-title {
      font-size: 28px;
    }
    .shoe-actions {
      flex-direction: column;
    }
    .shoe-img-wrapper {
      height: 250px;
    }
  }
  </style>
  